<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>transform-2D缩放</title>
    <style>

        /* 
        css3 元素2D缩放
            scale() 使用 scale()函数进行缩放。
                默认值是1，因此取值为0.01到0.99之间的任何值使元素缩小；而任何大于或者等于1.01的值，让元素变的更大
                缩放参照元素的中心点
            语法：sacle(sx|ty) | scale(sx,sy)
                sy 用来指定元素横向坐标(X轴)方向的缩放向量，如果值在0.01到0.99之间，会让对象在X轴方向缩小，而任何大于或者
                    等于1.01的值，元素在Y轴方向放大
                也可以使用 scaleX(sx) 或者 scaleY(sy)
        */

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: #f00;
            /* 添加过渡效果 */
            transition: transform 1s ease-in-out;
        }

        div:active {
            /* 添加缩放效果 */
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>